<template>
    <div>
        <div class="container">
            <div class="demo">
                <wxc-minibar title="充值"
                             background-color="#009ff0"
                             text-color="#FFFFFF"
                             @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                             @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
            </div>
        </div>
        <div class="head-body">
            <div class="head-txt-mount">
                <text style="color:blue;font-size: 40px;top: 20px;left:20px;position: absolute;">充值金额:</text>
                <input class="input" type="text" placeholder="">
            </div>
            <div class="cz-way">
               <div style="width: 140px;height:40px;">
                   <text style="font-weight: bold;color: brown">充值方式:</text>
               </div>
            </div>
        </div>
        <radio></radio>
    </div>
</template>

<script>
    import { WxcRadio } from 'weex-ui'
    import { WxcMinibar } from 'weex-ui';
    var navigator = weex.requireModule('navigator');
    const modal = weex.requireModule('modal');
    export default {
        components: { WxcMinibar, WxcRadio},
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            }
        }
    }
</script>

<style scoped>
    .head-body{
        width: 750px;
        height:100px;
        border-width: 1px;
        border-color: rgba(127, 255, 176, 0.91);
        background-color: #8fe7ff;
    }
    .head-txt{
        width: 500px;
        height: 100px;
        margin-left: 125px;
        display: flex;
        justify-content:center;
        align-items:center;
        margin-top: 60px;
    }
    .head-txt-mount{
        width: 500px;
        height: 100px;
        /*border-color: brown;*/
        /*border-width: 1px;*/
        margin-left: 125px;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .input{
        width: 300px;
        height: 60px;
        display: flex;
        justify-content:center;
        align-items:center;
        top:0px;
        left:100px;
        border-color: #00B4FF;
        border-width: 2px;
    }
    .cz-way{
        width: 500px;
        height: 240px;
        color: brown;
        border-width: 1px;
        border-color: red;
        margin-left: 125px;
    }
    .payway{
        width: 350px;
        height: 240px;
        border-color: blue;
        border-width: 1px;
        margin-left: 150px;
        margin-top:0px;

    }
    .wxc-demo {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #ffffff;
    }
    .scroller {
        flex: 1;
    }
    .radio-text {
        font-size: 30px;
        color: #333333;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 24px;
    }
</style>